<template>
  <div v-loading="loading" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons')
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'DealIndustry'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      chart: null,
      loading: false,
      optionData: {
        dateList: []
      }
    }
  },
  // watch: {
  //   chartData() {
  //     const data = {
  //       count: [],
  //       industry: []
  //     }
  //     this.chartData.forEach(item => {
  //       data.count.push({ name: this.$t(item.dictLabel), value: item.dealNums, amount: item.amount / 1000000 })
  //       data.industry.push(this.$t(item.dictLabel))
  //     })
  //     this.chart.setOption({
  //       legend: {
  //         data: data.industry
  //       },
  //       series: [{
  //         data: data.count
  //       }]
  //     })
  //   }
  // },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, null)

      this.chart.setOption({
        tooltip: {
          trigger: 'item'
          // formatter: function(p) {
          //   return p.name + '<br>' + window.i18n.t('数量(个)') + '：' + p.data.value + '<br>' + window.i18n.t('金额(百万)') + '：' + p.data.amount
          // }
        },
        legend: {
          bottom: 10,
          textStyle: {
            fontSize: 10,
            color: '#fff'
          }
        },
        calculable: true,
        color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
        series: [
          {
            type: 'pie',
            radius: [0, 86],
            center: ['50%', '45%'],
            // 是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                formatter: '{b}: {c}'
              }
            },
            labelLine: {
              normal: {
                show: true,
                length2: 1
              },
              emphasis: {
                show: true
              }
            },
            data: [
              { value: 8, name: this.$t('新能源') },
              { value: 4, name: this.$t('新材料') },
              { value: 3, name: this.$t('环保') },
              { value: 2, name: this.$t('数据中心') },
              { value: 2, name: this.$t('智慧矿山') },
              { value: 1, name: this.$t('智慧交通') },
              { value: 1, name: this.$t('通信') },
              { value: 1, name: this.$t('车联网') },
              { value: 1, name: this.$t('芯片') },
              { value: 1, name: this.$t('工业互联网') }
            ]
          }
        ],
        animationEasing: 'cubicInOut',
        animationDuration: 3000
      })
    }
  }
}
</script>
